<template>
  <div>
    <baidu-map
      style="display:flex;flex-direction: column-reverse;"
      id="allmap"
      @ready="mapReady"
      @click="getLocations"
      :scroll-wheel-zoom="true"
    >
      <div style="display:flex;justify-content:center;margin:15px">
        <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
          <el-input v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="输入地址"></el-input>
        </bm-auto-complete>
        <el-button type="primary" @click="getBaiduMapPoint">确定</el-button>
      </div>
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
        <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
      <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
        <p>纬度:{{ this.latitude }}</p>
        <p>经度:{{ this.longitude }}</p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>

export default {
  data() {
    return {
      addressData: '',
      searchJingwei: '',
      infoWindowShow: false,
      longitude: '',
      latitude: '',
      point: '',
      center: {
        longitude: '',
        latitude: '',
        searchJingwei: ''
      },
    }
  },

  methods: {
    //地图初始化
    mapReady({BMap, map}) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.6401, 34.72468);
      map.centerAndZoom(this.point, 12);
      this.BMap = BMap
      this.map = map
    },
    //点击获取经纬度
    async getLocations(e) {
      // // console.log(e.point)
      // this.longitude=e.point.lng
      // this.latitude=e.point.lat
      // var gc = new BMap.Geocoder();
      // var pt = new BMap.Point(e.point.lng, e.point.lat)
      // gc.getLocation(pt,function(result){
      //   console.log(result.address)
      //   var address = result.address; //获取到当前定位的详细地址信息
      //   console.log(address)
      // });

      this.longitude = e.point.lng;
      this.latitude = e.point.lat;
      var gc = new BMap.Geocoder();
      var pt = new BMap.Point(e.point.lng, e.point.lat);

      var self = this; // 保存this的引用，以在回调函数中访问到组件的data属性

      // 将gc.getLocation包装为Promise
      var getAddress = new Promise(function (resolve, reject) {
        gc.getLocation(pt, function (result) {
          var address = result.address;
          resolve(address); // 将address传递给Promise的resolve函数
        });
      });

      // 等待获取到位置信息后，再继续执行后续代码
      var address = await getAddress;
      self.addressData = address; // 将address赋值给组件的data属性中的变量
      console.log(self.addressData); // 在控制台输出addressData的值

      this.infoWindowShow = true
      this.center.latitude = this.latitude
      this.center.longitude = this.longitude;
      this.center.searchJingwei = self.addressData
      // this.center.searchJingwei=this.addComp.province + ", " + this.addComp.city + ", " + this.addComp.district + ", " + this.addComp.street + ", " + this.addComp.streetNumber
      this.$emit("map-baidu", this.center);
    },


    getBaiduMapPoint() {
      let that = this
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.searchJingwei, function (point) {
          if (point) {
            that.map.centerAndZoom(point, 15)
            that.latitude = point.lat
            that.longitude = point.lng
            that.infoWindowShow = true
            that.center.latitude = that.latitude
            that.center.longitude = that.longitude;
            that.center.searchJingwei = that.searchJingwei;
            that.mapbaidu();
          }
        },
      )
    },
    mapbaidu() {
      this.$emit("map-baidu", this.center);
    },
    //信息窗口关闭
    infoWindowClose() {
      this.latitude = ''
      this.longitude = ''
      this.infoWindowShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
#allmap {
  height: 450px;
  width: 100%;
  margin: 10px 0;
}
</style>
